<template>
  <div class="position_by_name_mode_content">
    <div class="position_by_name_mode_content_top_content">
      <div>
         <span @click="to_functionPage">首页 </span> / <span @click="mode_exit">训练模式 </span> / <span> 名称定位测验 </span>
      </div>
      <div>名称定位测验</div>
      <div></div>
    </div>

    <div class="position_by_name_mode_map_content">
      <div class="position_by_name_mode_left_map">
        <position_by_name_mode_map/>
      </div>
    </div>

    <div class="position_by_name_mode_user_interface">
      <div class="position_by_name_mode_user_interface_topic">
        <div class="position_by_name_mode_user_interface_topic_title">
          题目区域
        </div>
        <div class="position_by_name_mode_user_interface_topic_text">
          请找到<span>{{topic_now_belongTo}}{{topic_now}}</span>的行政规划区域
        </div>
        <div class="position_by_name_mode_user_interface_topic_nextbutton"  @click="next_topic">下一题</div>
        <div class="position_by_name_mode_user_interface_topic_status">
          <div class="position_by_name_mode_user_interface_topic_status_answer">
            <strong>状态：</strong><span id="status_answer">{{answer_status}}</span>
          </div>
        </div>
      </div>
      <div class="position_by_name_mode_user_interface_records">
        <div class="position_by_name_mode_user_interface_records_title">训练记录</div>
        <div class="position_by_name_mode_user_interface_records_content">
          <div class="position_by_name_mode_user_interface_records_content_list"
               v-for="(item,index) in position_records" :key="index">
            {{index+1}}.题目为请找到曲靖市{{item.belongTo}}{{item.answer}}区域，用户选择为{{item.user_input}}，{{item.status}}
          </div>
        </div>
      </div>
      <div class="position_by_name_mode_user_interface_analysis_map">
        <div class="position_by_name_mode_user_interface_analysis_map_title">地图解析</div>
        <div class="position_by_name_mode_user_interface_analysis_map_county_map">
          <analysis_county_map/>
        </div>
        <div class="position_by_name_mode_user_interface_analysis_map_town_map">
          <analysis_town_map/>
        </div>
      </div>
    </div>

<!--作答确认弹窗-->
    <div class="position_answer_pop" v-if="answer_pop_status">
      <div class="position_answer_pop_content">
        <div class="position_answer_pop_content_title" id="tip_text">{{tip_text}}</div>
        <div class="position_answer_pop_content_buttons">
          <div class="position_answer_pop_content_sure" @click="sure_pop">确定</div>
          <div class="position_answer_pop_content_cancel" @click="cancel_pop">取消</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import position_by_name_mode_map from "@/components/FunctionModulePage/TrainModel/training_mode_select/position_by_name_mode/position_by_name_mode_map";
import analysis_county_map from "@/components/FunctionModulePage/TrainModel/training_mode_select/position_by_name_mode/analysis_county_map";
import analysis_town_map from "@/components/FunctionModulePage/TrainModel/training_mode_select/position_by_name_mode/analysis_town_map";

export default {
  name: "position_by_name_mode",
  data(){
    return{
      list:10,
      timer:null,   //定时器
      text_index:1,
      answer_input:null,   //用户输入
      topic_list:[],   //题库
      topic_now:null, //题目/正确答案
      topic_now_belongTo:null,  //答案所属县区
      topic_index:1,  //当前题目索引
      answer_status:'?' ,  //作答状态
      tip_text:'是否选择当前区域？',
      position_records:[],  //训练记录
      position_analysis:[],  //当前题目的地图解析
    }
  },
  components:{
    position_by_name_mode_map,
    analysis_county_map,
    analysis_town_map
  },
  computed:{
    //用户选择
    topic_now_answer(){
      return this.$store.state.position_by_name_answer_input
    },
    answer_pop_status(){
      return this.$store.state.position_by_name_pop_status
    }
  },
  watch:{

  },
  created() {
    this.get_topic_list()
  },
  methods:{
    //去首页
    to_functionPage(){
      this.$store.commit('setexit_sure_status',true)
    },
    //模式退出
    mode_exit(){
      this.$store.commit('set_mode_exit_status',false)
      this.$router.replace('/train').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            // 如果不是重复导航错误，可以抛出错误或进行其他处理
            throw err;
          }
        });
    },
    //下一题
    next_topic(){
      //循环题库
      if(this.topic_index >= this.topic_list.length-1){
        this.topic_index = 1
      }
      this.topic_index++
      this.get_topic()
    },
    //获取父组件传回的题库
    get_topic_list(){
      this.topic_list = this.$store.state.mode_topic_list
      // console.log('random页面的题库数据：',this.topic_list)
      //获取题库后首题由页面挂载完成之后显示
      this.get_topic()
    },
    //生成单独题目
    get_topic(){
      this.topic_now = this.topic_list[this.topic_index-1].height_light
      this.topic_now_belongTo = this.topic_list[this.topic_index-1].belongTo
    },
    //取消
    cancel_pop(){
      this.$store.commit('set_position_by_name_pop_status',false)
    },
    //确认
    sure_pop(){
      this.judge()
    },
    //判断答案比对逻辑
    judge(){
      let status = null  //回答状态
      this.answer_input = this.$store.state.position_by_name_answer_input
      if(this.topic_now === this.answer_input){
        document.getElementById('tip_text').style.color = 'green'
        document.getElementById('status_answer').style.color = 'green'
        this.answer_status = '回答正确'
        this.tip_text = '回答正确'
        status = '回答正确'
      }else{
        document.getElementById('tip_text').style.color = 'red'
        document.getElementById('status_answer').style.color = 'red'
        this.answer_status = '回答错误'
        this.tip_text = '回答错误'
        status = '回答错误'
      }
      this.timer = setTimeout(()=>{
        this.tip_text = '是否选择当前区域？'
          this.$store.commit('set_position_by_name_pop_status',false)
      },1000)
      //加入作答记录
      this.position_records.push(
          {
            user_input:this.answer_input,
            answer:this.topic_now,
            status:status,
            belongTo:this.topic_now_belongTo
          }
      )
      //作答记录上传至vuex----生成地图解析
      this.position_analysis = {
            county:this.topic_now_belongTo ,
            town:this.topic_now
          }
      this.answer_input = null
      this.$store.commit('set_position_analysis',this.position_analysis)
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer)
    this.mode_exit()
  }
}
</script>

<style scoped>
  .position_by_name_mode_content{
    width: 69vw;
    height:  90vh;
    /*background-color: #128bdc;*/
  }
  .position_by_name_mode_content_top_content{
    width: 69vw;
    height: 10vh;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px dashed black;
    background-color: #565756;
    position: absolute;
    top: 0;
  }
  .position_by_name_mode_content_top_content div{
    width: 33%;
    height: 100%;
    /* margin-right: 1px; */
    /* background-color: #09fab6; */
    float: left;
  }
  .position_by_name_mode_content_top_content div:nth-child(2){
    text-align: center;
    line-height: 10vh;
    font-size: 2vw;
    color: white;
    font-weight: bolder;
  }
  .position_by_name_mode_content_top_content div:nth-child(1){
    box-sizing: border-box;
    padding-left: 1vw;
    text-align: left;
    line-height: 10vh;
    color: white;
    font-size: 0.6vw;
  }
  .position_by_name_mode_content_top_content div:nth-child(1):hover{
    cursor: pointer;
  }
  .position_by_name_mode_content_top_content div:nth-child(1) span:hover{
    color: #0aa2e8;
  }
  .mode_exit{
    width: 3vw;
    height: 5vh;
    /*background-color: red;*/
    position: relative;
    top: 2.5vh;
    left: 65vw;
    text-align: center;
    /*line-height: 5vh;*/
    float: left;
  }
  .mode_exit i{
    position: relative;
    top: -3vh;
    font-size: 2vw;
    /*background-color: yellow;*/
  }
  .mode_exit i:hover{
    cursor: pointer;
    color: red;
  }
  .mode_exit i:active{
    cursor: pointer;
    color: green;
    font-size: 2.2vw;
  }
  .position_by_name_mode_map_content{
    width: 69vw;
    height:  78vh;
    /*background-color: #12dc7e;*/
    position: relative;
    top: 12vh;
  }
  .position_by_name_mode_left_map{
    width: 35vw;
    height:  78vh;
    background-color: #6c6d6d;
    position: relative;
    top: 0vh;
  }
  .position_by_name_mode_user_interface{
    width: 33vw;
    height:  78vh;
    /*background-color: #9ceab2;*/
    position: relative;
    top: -66vh;
    left: 36vw;
    color: #146dd9;
  }
  .position_by_name_mode_user_interface_topic{
    width: 33vw;
    height:  20vh;
    background-color: #575858;
    box-sizing: border-box;
    border: 1px dashed black;
    border-radius: 10px;
    overflow: hidden;
    font-weight: bolder;
  }
  .position_by_name_mode_user_interface_topic_title{
    width: 33vw;
    height:  3vh;
    /*background-color: #2fe7ff;*/
    text-align: center;
    line-height: 3vh;
    box-sizing: border-box;
    border-bottom: 1px solid black;
    color: #0ae80a;
  }
  .position_by_name_mode_user_interface_topic_text{
    width: 25vw;
    height:  10vh;
    /*background-color: #69a3aa;*/
    box-sizing: border-box;
    padding-left: 0.5vw;
    text-align: left;
    line-height: 10vh;
    font-size: 1.3vw;
    color: rgb(37, 211, 104);
  }
  .position_by_name_mode_user_interface_topic_text span{
    /* text-decoration: underline; */
    /* text-decoration-color: black; */
  }
  .position_by_name_mode_user_interface_topic_nextbutton{
    width: 4vw;
    height:  3vh;
    background-color: #068bc9;
    box-sizing: border-box;
    position: relative;
    top: -6.5vh;
    left: 27vw;
    border-radius: 10px;
    text-align: center;
    line-height: 3vh;
    border: 1px dashed black;
    color: #0ae80a;
    overflow: hidden;
    font-size: 0.5vw;
  }
  .position_by_name_mode_user_interface_topic_nextbutton:hover{
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid black;
    box-shadow: 1px 1px 1px black;
    background-color: #08a6f0;
  }
  .position_by_name_mode_user_interface_topic_nextbutton:active{
    color: greenyellow;
    background-color: #1469d2;
  }
  .position_by_name_mode_user_interface_topic_status{
    width: 33vw;
    height:  7vh;
    /*background-color: #af2fff;*/
    position: relative;
    top: -4vh;
    color: #0ae80a;
  }
  .position_by_name_mode_user_interface_topic_status_answer{
    width: 10vw;
    height:  7vh;
    /*background-color: #3256db;*/
    box-sizing: border-box;
    padding-left: 0.5vw;
    text-align: left;
    line-height: 7vh;
  }

  .position_by_name_mode_user_interface_records{
    width: 33vw;
    height:  24vh;
    background-color:yellow;
    margin-top: 2vh;
    border-radius: 10px;
    overflow: hidden;
    border: 1px dashed black;
    box-sizing: border-box;
  }
  .position_by_name_mode_user_interface_records_title{
    width: 33vw;
    height:  3vh;
    background-color: #343436;
    box-sizing: border-box;
    font-weight: bolder;
    text-align: center;
    line-height: 3vh;
    border-bottom: 1px solid black;
  }
  .position_by_name_mode_user_interface_records_content{
    width: 33vw;
    height:  21vh;
    box-sizing: border-box;
    background-color: #343436;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .position_by_name_mode_user_interface_records_content::-webkit-scrollbar{
    display: none;
  }
  .position_by_name_mode_user_interface_records_content_list{
    width: 33vw;
    height:  3vh;
    box-sizing: border-box;
    /*background-color: greenyellow;*/
    margin-bottom: 0.5vh;
    padding-left: 0.5vw;
    font-size: 0.7vw;
    line-height: 3vh;
  }


  .position_by_name_mode_user_interface_analysis_map{
    width: 33vw;
    height:  30vh;
    background-color:rgb(88, 89, 90);
    margin-top: 2vh;
    border-radius: 10px;
    overflow: hidden;
    border: 1px dashed black;
    box-sizing: border-box;
  }
  .position_by_name_mode_user_interface_analysis_map_title{
    width: 33vw;
    height:  3vh;
    background-color: rgb(62, 62, 63);
    box-sizing: border-box;
    font-weight: bolder;
    text-align: center;
    line-height: 3vh;
    border-bottom: 1px solid black;
  }
  .position_by_name_mode_user_interface_analysis_map_county_map{
    width: 16.5vw;
    height:  27vh;
    background-color: rgb(62, 62, 63);
  }
  .position_by_name_mode_user_interface_analysis_map_town_map{
    width: 16.5vw;
    height:  27vh;
    background-color: rgb(62, 62, 63);
    position: relative;
    top: -27vh;
    left: 16.5vw;
  }


  .position_answer_pop{
    width: 35vw;
    height:  78vh;
    background-color: rgba(0,0,0,0.5);
    position: relative;
    top: -144vh;
    border-radius: 10px;
  }
  .position_answer_pop_content{
    width: 10vw;
    height:  10vh;
    background-color: white;
    position: relative;
    top: 25vh;
    left: calc(50% - 5vw);
    border-radius: 8px;
  }
  .position_answer_pop_content_title{
    width: 10vw;
    height:  5vh;
    /*background-color: #e74848;*/
    text-align: center;
    line-height: 5vh;
    font-weight: bolder;
  }
  .position_answer_pop_content_buttons{
    width: 10vw;
    height:  5vh;
    /*background-color: #aa2ed7;*/
  }
  .position_answer_pop_content_buttons div{
    text-align: center;
    line-height: 3vh;
    border-radius: 8px;
    box-sizing: border-box;
  }
  .position_answer_pop_content_buttons div:hover{
    border: 1px solid black;
    color: white;
    cursor: pointer;
  }
  .position_answer_pop_content_buttons div:active{
    background-color: #0ae80a;
  }
  .position_answer_pop_content_sure{
    width: 4vw;
    height:  3vh;
    background-color: #1b94e5;
    position: relative;
    top: 1vh;
    left: 0.5vw;
  }
  .position_answer_pop_content_cancel{
    width: 4vw;
    height:  3vh;
    background-color: #1b94e5;
    position: relative;
    top: -2vh;
    left: 5.5vw;

  }



</style>